<template>
  	<div class="login">
		<div class="loginForm">
			<div class="loginForm-title">
				<img class="loginForm-titleLogo" src="../images/logo.png">
				<span class="loginForm-titleText">Joe Project</span>
			</div>
			<div class="loginForm-subtitle">Joe Project 是一个比Ant Pro 更美的模拟产品</div>
			<ul class="accountForm">
				<li 
					v-for="(accountItem,index) in accountForm" 
					v-text="accountItem" 
					:class="{'accountItem':index == accountItemActiveIndex,'mr30':index == 0,}" 
					@click="activeAccountItem(index)">
				</li>
			</ul>
			<form class="pcAccount" v-show="accountItemActiveIndex == 0">
				<div class="inputGroup">
					<span class="iconfont icon-zhanghao"></span>
					<input type="text" class="">
				</div>
				<div class="inputGroup">
					<span class="iconfont icon-zhanghaomima-"></span>
					<input type="text" class="">
				</div>
			</form>
			<form class="pcAccount" v-show="accountItemActiveIndex == 1">
				<div class="inputGroup">
					<span class="iconfont icon-shouji"></span>
					<input type="text" class="">
				</div>
				<div class="inputGroup">
					<span class="iconfont icon-xinfeng"></span>
					<input type="text" class="codeInput fl">	
					<downCount></downCount>
					<div class="clear"></div>
				</div>
			</form>
			<div class="btnBox">
				<div class="wid100">
					<span class="fl autoLogin">
						<input type="checkbox" v-model="autoLogin">
						自动登陆
					</span>
					<router-link class="fr forgetPw" to="/forgetPw.vue">忘记密码</router-link>
					<div class="clear"></div>
				</div>
				<button class="loginBtn">登陆</button>
				<div class="theOtherLoginWays">
					<div class="fl">
						<span class="theOtherLoginWaysText">其他登陆方式：</span>
						<span class="iconfont icon-zhifubao"></span>
						<span class="iconfont icon-taobao"></span>
						<span class="iconfont icon-xinlang"></span>
					</div>
					<router-link class="fr userRegister" to="register">注册账户</router-link>
					<div class="clear"></div>
				</div>
			</div>
		</div>
		<div class="footer">
			<div>
				<span class="mr20">帮助</span>
				<span class="mr20">隐私</span>
				<span>条款</span>
			</div>
			<div>Copyright  <span class="iconfont icon-copyright"></span>2017 蚂蚁金服体验技术部出品</div>
		</div>
  	</div>
</template>

<script>
import downCount from '../components/downCount';
export default {
	components:{
		downCount
	},
  	data() {
		return {
			accountForm: ["账号密码登陆", "手机号登陆"],
			accountItemActiveIndex:0,
			//自动登陆
			autoLogin:true,
		};
  	},
	methods:{
		activeAccountItem(activeItemIndex){
			this.accountItemActiveIndex = activeItemIndex;
		}
	}
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
.login {
	width: 100%;
	height: 100%;
	background: url(../images/loginBg.svg) no-repeat;
	background-size: 100%;
	background-position: center;
	.loginForm {
		width: 370px;
		position: absolute;
		top: 50%;
		left: 50%;
		margin-top: -340px;
		margin-left: -185px;
		text-align: center;
		.loginForm-title {
			line-height: 50px;
			height: 50px;
			display: inline-block;
		}
		.loginForm-titleLogo {
			width: 45px;
			height: 45px;
			padding-top: 2.5px;
			float: left;
		}
		.loginForm-titleText {
			font-size: 33px;
			color: rgba(0, 0, 0, 0.85);
			font-family: "Myriad Pro", "Helvetica Neue", Arial, Helvetica, sans-serif;
			font-weight: 600;
			float: left;
		}
		.loginForm-subtitle {
			font-size: 14px;
			color: rgba(0, 0, 0, 0.45);
			margin-top: 5px;
			margin-bottom: 40px;
		}
		.accountForm {
			width: 280px;
			box-sizing: border-box;
			display: inline-block;
			text-align: center;
			margin-bottom: 25px;
		}
		.accountForm li {
			font-size: 16px;
			display: inline-block;
			box-sizing: border-box;
			padding: 10px;
			cursor: pointer;
		}
		.accountItem{
			color: #1890ff;
			font-weight: 500;
			border-bottom: 2px solid #1890ff;
		}
		.pcAccount{
			width: 100%;
			.inputGroup{
				width: 100%;
				position: relative;
				margin-bottom:20px;
				text-align: left;
				span{
					display: inline-block;
					width: 40px;
					height: 100%;
					line-height: 40px;
					text-align: center;
					position: absolute;
					top: 0;
					left: 0;
					font-size: 16px;
				}
				input{
					width: 100%;
					height: 40px;
					box-sizing: border-box;
					padding-left: 40px;
					font-size: 14px;
				}
				.codeInput{
					width: 235px;
					margin-right: 15px;
				}
				.codeBtn{
					width: 120px;
					height: 40px;
					color: #666;
					background-color: #fff;
					border: 1px solid #bfcbd9;
					box-sizing: border-box;
					border-radius: 0;
					font-size: 14px;
				}
			}
		}
		.btnBox{
			line-height: 22px;
			.autoLogin{
				font-size: 14px;
				input{
					position: relative;
					top: -1px;
				}
			}
			.forgetPw{
				font-size: 14px;
				color: #1890ff;
			}
			.loginBtn{
				width: 100%;
				border-radius: 4px;
				height: 40px;
				color: #fff;
				background-color: #1890ff;
				border-color: #1890ff;
				font-size: 14px;
				margin: 20px 0;
			}
			.theOtherLoginWays{
				height: 30px;
				line-height: 30px;
				text-align: left;
				.theOtherLoginWaysText{
					position: relative;
					top: -5px;
					font-size: 14px;
				}
				.iconfont{
					font-size: 28px !important;
					margin-right: 10px;
				}
			}
			.userRegister{
				color: #1890ff;
				font-size: 14px;
			}
		}
	}
	.footer{
		font-size: 14px;
		width: 100%;
		position: fixed;
		text-align: center;
		bottom:20px;
		left: 0;
		line-height: 30px;	
	}
}
</style>
